<template>
  <div>
    <div>
      <van-sticky>
        <van-nav-bar title="电话咨询" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="phone-consultation">
      <div class="progress-bar">
        <span
          ><h2 style="display: inline-block">2</h2>
          /3 病情描述</span
        >
        <van-progress :percentage="70" :show-pivot="false" />
      </div>
      <div>
        <h2>您需要为谁咨询</h2>
        <div class="who">+</div>
      </div>
      <div class="SeekMedicalAttention">
        <!-- <p>是否就该病情到医院就诊过</p> -->
        <label data-v-2d10c29b>是否就该病情到医院就诊过</label>
        <div>
          <span :class="show ? 'Select' : 'Unchecked'" @click="show = true"
            >是</span
          ><span :class="show ? 'Unchecked' : 'Select'" @click="show = false"
            >否</span
          >
        </div>
      </div>
      <div class="consultaiodisease" v-show="show" @click="popword = true">
        <input type="text" placeholder="输入医生诊断的疾病名称" v-model="searchvalue" />
        <span>></span>
      </div>
      <div v-show="popword" class="searchBox">
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="输入医生诊断的疾病名称"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
        <ul v-for="(item, index) in boxList" :key="index">
          <li @click="onsearchBox(item)">
            <b>{{ item }}</b>
          </li>
        </ul>
      </div>
    </div>
    <div class="consultaiodiseasebutton">
      <div>
        <van-checkbox v-model="checked" class="checkbox">
          <p>
            我已经认真阅读、理解并同意
            <a href="/mes">《知情同意书》及《在线问诊服务个人信息处理规则》</a>
          </p>
        </van-checkbox>
      </div>
      <div class="next-step">
        <button class="PreviousStep" @click="onClickLeft">上一步</button>
        <button class="NextStep" @click="handleNextStep">开始问诊</button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { showToast } from "vant";
import instance from "../axios/index";
import router from "../router";
const searchvalue = ref("");
const value = ref("");
const boxList = ref([]);
let newarr = ref([]);
// 是否就该病情到医院就诊过
const show = ref(false);
const checked = ref(false);
const popword = ref(false);
// 处理下一步按钮点击的方法（这里只是一个示例，实际可能需要更多逻辑）
const handleNextStep = () => {
  //调用支付接口
  if (!checked.value) {
    showToast("请阅读并同意协议");
    return;
  } else {
    let data = {
      id: Math.random().toString(36).substr(2),
      price: 419,
    };
    instance.get("/api/pay", { params: data }).then((res) => {
      window.open(res.data.data);
    });
    setTimeout(() => {
      router.go(-2);
    }, 10000);
  }
};

// 搜索 在数据库中查找我搜索的内容
const onSearch = () => {
  instance.post("/api/homeall").then((res) => {
    res.data.data.forEach((item: any) => {
      if (item.department == value.value) {
        newarr.value.push(item.department);
      }
    });
    //循环去重 
    boxList.value = newarr.value.filter(
      (element, index) => newarr.value.indexOf(element) === index
    );
  });
};
// 点击我选中的值
const onsearchBox = (item) => {
  popword.value = false;
  searchvalue.value = item
};
// 点击取消 搜索页消失
const onCancel = () => {
  popword.value = false;
};

// 点击返回上一级
const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.phone-consultation {
  padding: 0.2rem;
}
.progress-bar {
  margin-bottom: 0.2rem;
  padding-bottom: 0.1rem;
}

.progress-bar span {
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.1rem;
}
.who {
  width: 1.3rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.5rem;
  color: #ccc;
  margin-top: 0.2rem;
  border: 1px solid #ccc;
  margin-bottom: 0.4rem;
}
.SeekMedicalAttention {
  border-bottom: 1px solid #e3e4e8;
  padding-bottom: 0.15rem;
  height: 0.3rem;
  line-height: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.Unchecked {
  display: inline-block;
  width: 0.6rem;
  text-align: center;
  color: #5e616b;
  background-color: #f5f6f6;
  border-radius: 1rem;
  line-height: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.Select {
  display: inline-block;
  width: 0.6rem;
  text-align: center;
  color: #589bff;
  background-color: #f5fafd;
  border: 1px solid #73acff;
  border-radius: 1rem;
  line-height: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.consultaiodiseasebutton {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
.consultaiodisease {
  position: relative;
  height: 0.3rem;
  line-height: 0.3rem;
  margin-top: 0.1rem;
  border-bottom: 1px solid #e3e4e8;
}
.consultaiodisease input {
  border: none;
}
.consultaiodisease span {
  position: absolute;
  right: 0;
  bottom: 0;
}
.checkbox {
  font-size: 0.12rem;
  margin-bottom: 0.15rem;
}
.next-step {
  display: flex;
  height: 0.5rem;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.PreviousStep {
  font-weight: 600;
  width: 48%;
  border-radius: 1rem;
  height: 0.5rem;
  border: none;
  color: #3f86ff;
  background-color: #ebf2ff;
}
.NextStep {
  font-weight: 600;
  width: 48%;
  border-radius: 1rem;
  height: 0.5rem;
  border: none;
  color: #fff;
  background-color: #3f86ff;
}
.searchBox {
  width: 100%;
  height: 100%;
  z-index: 99;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
}
.searchBox ul {
  display: block;
  list-style-type: disc;
  padding-inline-start: 0.2rem;
  unicode-bidi: isolate;
}
.searchBox ul li {
  height: 0.4rem;
  font-size: 0.18rem;
  line-height: 0.4rem;
  border-bottom: 1px solid #e3e4e8;
}
</style>